What is eslint-config-airbnb?
The eslint-config-airbnb package provides a set of ESLint rules that follow Airbnb's JavaScript style guide. It is widely used in the JavaScript community for enforcing a consistent code style and catching common coding errors.
What are eslint-config-airbnb's main functionalities?
JavaScript Style Rules
Enforces JavaScript style rules as per Airbnb's style guide. This includes rules for syntax, best practices, variable naming, line breaks, and more. The code sample shows how to extend these rules in a project's package.json file.
"eslintConfig": { "extends": "airbnb" }
React Specific Rules
Provides a set of rules specific to React, including hooks rules. This helps in maintaining code quality and consistency in React components. The code sample demonstrates how to extend these rules for React in a project's package.json file.
"eslintConfig": { "extends": "airbnb/hooks" }
Import/Export Rules
Includes rules for managing import/export statements, ensuring they are used correctly and efficiently. The code sample indicates how to use the base rules without React-specific rules in a project's package.json file.
"eslintConfig": { "extends": "airbnb-base" }
Other packages similar to eslint-config-airbnb
eslint-config-standard
This package provides a standard set of rules for JavaScript code style. It is less opinionated than Airbnb and does not enforce JSX or React specific rules. It is a good alternative for those who prefer a more flexible approach to code style.
eslint-config-google
This package includes a set of ESLint rules based on Google's JavaScript style guide. It offers another comprehensive style guide but with different preferences and coding conventions compared to Airbnb's.
eslint-config-prettier
eslint-config-prettier disables all formatting-related ESLint rules that might conflict with Prettier, a code formatter. It is often used in conjunction with other ESLint configs to ensure that ESLint focuses on code-quality rules while Prettier takes care of formatting.
eslint-config-airbnb
This package provides Airbnb's .eslintrc as an extensible shared config.
Usage
We export three ESLint configurations for your usage.
eslint-config-airbnb
Our default export contains all of our ESLint rules, including ECMAScript 6+ and React. It requires eslint
, eslint-plugin-import
, eslint-plugin-react
, and eslint-plugin-jsx-a11y
. If you don't need React, see eslint-config-airbnb-base.
- Install the correct versions of each package, which are listed by the command:
npm info "eslint-config-airbnb@latest" peerDependencies
If using npm 5+, use this shortcut
npx install-peerdeps --dev eslint-config-airbnb
If using yarn, you can also use the shortcut described above if you have npm 5+ installed on your machine, as the command will detect that you are using yarn and will act accordingly.
Otherwise, run npm info "eslint-config-airbnb@latest" peerDependencies
to list the peer dependencies and versions, then run yarn add --dev <dependency>@<version>
for each listed peer dependency.
If using npm < 5, Linux/OSX users can run
(
export PKG=eslint-config-airbnb;
npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)
Which produces and runs a command like:
npm install --save-dev eslint-config-airbnb eslint@^
If using npm < 5, Windows users can either install all the peer dependencies manually, or use the install-peerdeps cli tool.
npm install -g install-peerdeps
install-peerdeps --dev eslint-config-airbnb
The cli will produce and run a command like:
npm install --save-dev eslint-config-airbnb eslint@^
- Add
"extends": "airbnb"
to your .eslintrc
eslint-config-airbnb/whitespace
This entry point only errors on whitespace rules and sets all other rules to warnings. View the list of whitespace rules here.
eslint-config-airbnb/base
This entry point is deprecated. See eslint-config-airbnb-base.
eslint-config-airbnb/legacy
This entry point is deprecated. See eslint-config-airbnb-base.
See Airbnb's JavaScript styleguide and
the ESlint config docs
for more information.
Improving this config
Consider adding test cases if you're making complicated rules changes, like anything involving regexes. Perhaps in a distant future, we could use literate programming to structure our README as test cases for our .eslintrc?
You can run tests with npm test
.
You can make sure this module lints with itself using npm run lint
.